<template>
  <div class="flex-row-center-center" style="width:100%">
    <div class="content flex-row-center-center">
      <div style="width:18.77%">
        <div class="content-horizon1"></div>
        <div class="content-horizon2" style="margin-left:15.51%"></div>
        <div class="content-horizon3" style="margin-left:48.66%"></div>
      </div>
      <div class="rectangle flex-row-center-center">
        <div class="rectangle-title">储气库微泄漏监测大数据平台</div>
      </div>
      <div style="width:18.77%">
        <div class="content-horizon1"></div>
        <div class="content-horizon2"></div>
        <div class="content-horizon3"></div>
      </div>
    </div>
    <div class="title-highlight1"></div>
    <div class="title-highlight2"></div>
  </div>
</template>
<style  scoped>
.title-highlight1{
    background: #ff4040;
    position: absolute;
    width: 23.56%;
    height: 3px;
    top: 14.5px;
}
.title-highlight2{
     background: #ff4040;
    position: absolute;
    width:15.7%;
    height: 3px;
    top: 96.5px
}
.content {
  margin-top: 16px;
  width: 100%;
}
.content-horizon1 {
  height: 1px;
  width: 100%;
  background: #ff5454;
}
.content-horizon2 {
  height: 1px;
  width: 84.49%;
  background: #ff5454;
  margin-top: 37px;
}
.content-horizon3 {
  height: 1px;
  width: 64.82%;
  background: #ff5454;
  margin-top: 37px;
}
.rectangle {
  width: 32.29%;
  height: 82px;
  line-height: 41px;
  background-color:#cc0000;
  color: #c00;
  font-size: 28px;
  text-align: center;
  box-shadow: 0px 0px 6px 0px rgba(194, 6, 6, 0.6);
  font-family: Roboto;
  border: 1px solid #c00;
}
.rectangle-title {
  color: rgba(248, 248, 248, 100);
  font-size: 40px;
  font-family: 方正工业黑-标准;
  /* width: 78.90% */
}
</style>